<template>
    <div class="cart">
        <div class="cart-nav">
            <nuxt-link :to="'/'+$store.state.domain">首页</nuxt-link>
            <span> > </span>
            <span>货品清单</span>
        </div>
        <template v-if="hasLoad">
            <template v-if="cartData.length > 0">
                <div class="cart-list">
                    <table slot="view" class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    <el-checkbox v-model="selectAll" @change="selectAllItem" :indeterminate="indeterminate"></el-checkbox>
                                </th>
                                <th class="cart-select-all">全选</th>
                                <th>品牌</th>
                                <th>型号</th>
                                <th>商品信息</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>总计</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in this.cartData">
                                <td class="cart-checkbox">
                                    <el-checkbox v-model="item.checked" @change="resetSelectAll"></el-checkbox>
                                </td>
                                <td>
                                    <img v-if="item.image" :src="item.image" alt="" width="80px;">
                                    <img v-if="!item.image" src="../../assets/images/default-pic.png" width="80px;">
                                </td>
                                <td>{{item.item.brand}}</td>
                                <td> {{item.item.sn}}</td>
                                <td> {{item.item.name}}</td>
                                <td>
                                    <template v-if="!item.item.priceStatus">
                                        ¥ {{item.item.price}}
                                    </template>
                                    <template v-else>待报价</template>
                                </td>
                                <td>
                                    <!--<div class="good-count">
                                                <span @click="skuItemCount('minus',item)">-</span>
                                                <input type="text" v-model="item.count" @blur="checkInput(item,$event)" />
                                                <span @click="skuItemCount('add',item)">+</span>
                                            </div>-->
                                    <count-step v-model="item.count" :item-index="index" @stepChange="skuItemCount" @blur="checkInput(item,$event)"></count-step>
                                </td>
                                <td class="sale-price">
                                    <template v-if="!item.item.priceStatus">
                                        ¥ {{item.item.price * item.count}}
                                    </template>
                                    <template v-else>待报价</template>
                                </td>
                                <td>
                                    <i class="cart-list__delete" @click="deleteItem(item.item.id)"></i>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="cart-footer-bar">
                    <div>
                        <a href="javascript:void(0);" @click="deleteItems">
                            <i class="cart-list__delete"></i> 删除选中货品</a>
                        <nuxt-link :to="'/'+$store.state.domain+'/goods/listAll'">继续添加货品</nuxt-link>
                        <a class="cart-create" href="javascript:void(0);" @click="createInquiry">生成货品清单</a>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="cart-empty">
                    <h3>进货单空空如也～</h3>
                    <nuxt-link :to="'/'+$store.state.domain+'/goods/listAll'">继续添加货品</nuxt-link>
                </div>
            </template>
        </template>
    </div>
</template>

<script>
import { Row, Col, Button, Checkbox, MessageBox } from 'element-ui'
import WebStorage from '../../service/WebStorage'
import Service from '../../service/Service'
import { mapMutations } from 'vuex'
import CountStep from '~components/CountStep'

export default {
    layout: 'main',
    components: {
        'el-row': Row,
        'el-col': Col,
        'el-button': Button,
        'el-checkbox': Checkbox,
        CountStep,
    },
    asyncData () {
        if (process.BROWSER_BUILD) {
            let cartData = WebStorage.getCart()
            for (let item of cartData) {
                item.checked = false
            }
            return {
                cartData,
                hasLoad: true,
            }
        } else {
            return {
                cartData: [],
                hasLoad: false,
            }
        }
    },
    data () {
        return {
            selectAll: false,
            indeterminate: false,
        }
    },
    mounted () {
        if (!this.hasLoad) {
            this.hasLoad = true
            this.initData()
        }
    },
    methods: {
        selectAllItem () {
            this.indeterminate = false
            for (let item of this.cartData) {
                if (this.selectAll) {
                    item.checked = true
                } else {
                    item.checked = false
                }
            }
        },
        deleteItem (id) {
            MessageBox.confirm('是否确认删除选中货品？').then(() => {
                WebStorage.clearCartByIds([id])
                this.initData()
                this.refreshCart()
                this.resetSelectAll()
            }).catch(() => { })
        },
        initData () {
            let cartData = WebStorage.getCart()
            for (let item of cartData) {
                item.checked = false
            }
            this.cartData = cartData
        },
        deleteItems () {
            let clearIds = []
            let count = this.cartData.filter(({ checked, item }) => {
                if (checked) {
                    clearIds.push(item.id)
                }
                return checked
            }).length
            if (count === 0) {
                MessageBox.alert('请选择需要删除掉货品。')
                return
            }
            MessageBox.confirm('是否确认删除选中货品？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                WebStorage.clearCartByIds(clearIds)
                this.initData()
                this.refreshCart()
                this.resetSelectAll()
                MessageBox.alert('删除成功。', '提示', {
                    type: 'success',
                })
            }).catch(() => { })
        },
        resetSelectAll () {
            let count = this.cartData.filter(({ checked }) => checked).length
            if (count === this.cartData.length) {
                this.selectAll = true
                this.indeterminate = false
            } else {
                if (count > 0) {
                    this.indeterminate = true
                } else {
                    this.indeterminate = false
                }
                this.selectAll = false
            }
        },
        ...mapMutations(['refreshCart']),
        createInquiry () {
            let cartSelect = this.cartData.filter(({ checked }) => checked)
            if (cartSelect.length === 0) {
                MessageBox.alert('请选择货品。')
                return
            }
            MessageBox.confirm('是否确认生成货品清单？').then(async () => {
                var params = {
                    domainKey: this.$store.state.domain,
                    items: [],
                }
                for (let item of cartSelect) {
                    var paramItem = {
                        'skuId': item.item.id,
                        'quantity': item.count,
                        'skuName': item.item.name,
                        'skuSn': item.item.sn,
                        'image': item.image,
                        'skuPrice': item.item.price,
                        'totalPrice': item.item.price * item.count,
                        'brandName': item.item.brand,
                    }
                    if (item.item.priceStatus === 1) {
                        paramItem.skuPrice = 0
                        paramItem.totalPrice = 0
                    }
                    params.items.push(paramItem)
                }
                let newWin = window.open('/loading.html')
                let { data } = await Service.createOrder(params)
                if (data.success) {
                    var ids = []
                    for (let item of params.items) {
                        ids.push(item.skuId)
                    }
                    WebStorage.clearCartByIds(ids)
                    this.initData()
                    this.refreshCart()
                    newWin.location.href = '/inquiry?key=' + data.result.url
                }
            }).catch((e) => {
                console.log(e)
            })
        },
        skuItemCount (value) {
            if (value.type === 'add') {
                this.cartData[value.itemIndex].count += 1
            }
            if (value.type === 'minus') {
                if (this.cartData[value.itemIndex].count > 1) {
                    this.cartData[value.itemIndex].count -= 1
                }
            }
            var cart = {
                domainKey: this.$store.state.domain,
                items: this.cartData,
            }
            cart[this.$store.state.domain] = this.cartData
            WebStorage.setCart(cart)
        },
        checkInput () {
            var cart = {
                domainKey: this.$store.state.domain,
                items: this.cartData,
            }
            cart[this.$store.state.domain] = this.cartData
            WebStorage.setCart(cart)
        },
    },
}
</script>

<style lang="scss" scoped>
.cart-list {
    overflow: auto;
    table {
        border-spacing: 0;
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
        thead {
            background-color: #f9f9f9;
        }
        tr {
            height: 47px;
            th {
                white-space: nowrap;
                border-bottom: none!important;
                padding: 16px 8px!important;
                line-height: 1.42857143;
                color: #333;
            }
        }
        th,
        td {
            vertical-align: middle!important;
            text-align: center;
            word-break: keep-all;
            color: #666;
        }
        td {
            border-top: 1px solid #ddd;
            padding: 8px;
            line-height: 1.42857143;
            .good-count {
                vertical-align: middle;
                border: 1px solid #ddd;
                display: inline-block;
                width: 82px;
                margin: 0 auto;
                font-family: initial;
                input {
                    width: 40px;
                    height: 30px;
                    padding: 0 5px !important;
                    border-radius: 0;
                    float: left;
                    text-align: center;
                    border: none;
                    font-family: 'Microsoft YaHei';
                    box-sizing: border-box;
                }
                span {
                    background-color: #f9f9f9;
                    float: left;
                    display: block;
                    width: 20px;
                    height: 30px;
                    line-height: 28px;
                    font-size: 18px;
                    color: #999;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                    user-select: none;
                    &:hover {
                        background-color: #d4d4d4;
                    }
                }
            }
        }
    }
}

.cart-list__delete {
    display: inline-block;
    vertical-align: text-top;
    background-image: url(~assets/images/0504_20.png);
    background-size: 100%;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.cart {
    padding-bottom: 50px;
    .cart-nav {
        padding: 23px 0;
        span {
            margin-right: 10px;
            color: #999;
            &:first-child {
                color: #333;
            }
        }
    }
    .cart-footer-bar {
        padding: 0;
        >div {
            border-left: 1px solid #e7e7e7;
            border-bottom: 1px solid #e7e7e7;
            border-top: 1px solid #e7e7e7;
            a {
                color: #666;
                height: 50px;
                display: inline-block;
                line-height: 50px;
                padding: 0 25px;
                border-right: 1px solid #e7e7e7;
                text-decoration: none;
                i {
                    margin-right: 10px;
                }
            }
            .total-price {
                float: right;
                color: #666;
                height: 50px;
                line-height: 50px;
                margin-right: 30px;
                span {
                    font-size: 16px;
                }
            }
            .cart-create {
                color: #fff;
                background-color: #00a2ff;
                float: right;
                height: 52px;
                padding: 0 30px;
                line-height: 52px;
                margin: -1px -2px 0 0;
            }
        }
    }
    .btn {
        min-width: 70px;
        border-radius: 0;
    }
    .cart-empty {
        text-align: center;
        padding-top: 50px;
        h3 {
            margin: 40px 0;
            color: #666;
        }
        a {
            color: #fff;
            margin-top: 20px;
            background-color: #00a2ff;
            display: inline-block;
            height: 45px;
            padding: 0 30px;
            line-height: 45px;
            text-decoration: none;
            margin: -1px -2px 0 0;
        }
    }
}
</style>

